<template>
  <div class="container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="种植" name="种植">
			<div class="container">
				<el-form v-for="(item,index) in plantlist" :key="index" style="margin-top:20px;" class="container">
					<el-row >
						<el-col :span="4">
							<div style="width:200px;height:200px; border:1px solid #ccc;">
								<img  :src="api + item.info.plantImg" alt="" style="width:100%;height:100%;">
							</div>
						</el-col>
						<el-col :span="12" style="margin-left:30px;">
							<div>
								<span style="font-size:18px; font-weight:600;">{{item.info.plantName}}</span>
								<span class="mar-l">种植批次号:{{item.info.batch}}</span>
							</div>
							<div style="margin-top:30px;font-size:14px;">
								<span>种植面积：{{item.info.plantArea}}亩</span>
								<span class="mar-l">种植地块：{{item.info.soilName}}</span>
								<span class="mar-l">种植时间：{{item.info.plantTime}}</span>
							</div>
							<div class="con">
								<div style="margin-top:10px;"><span>生长:{{item.info.iday}}天</span><span style="position:absolute;left:200px;">预计收获时间：{{item.info.reapTime}}</span></div>
								<div style="margin-top:20px;"><span>种苗数量：{{item.info.plantNumber}}{{item.info.units}}</span><span style="position:absolute;left:200px;">种植人：{{item.info.plantUserName}}</span></div>
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top:30px;background:#f5f5f5;">
						<div style="display: flex; flex-wrap: wrap;justify-content: flex-start;">
							 <div class="addtend" v-for="(s,index) in item.children[0].info" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
								<div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.type}}</div>
								<el-form-item label="操作时间">
									{{s.beginTime}}至{{s.endTime}}
								</el-form-item>
								<el-form-item label="操作人">
									{{s.principalName}}
									<el-button type="success" round size="mini" v-if="s.finished == true" style="float: right;margin-right:20px;">任务完成</el-button>
									<el-button type="danger" round size="mini" v-if="s.finished == false"  style="float: right;margin-right:20px;">任务未完成</el-button>
								</el-form-item>
								<img v-if="s.img != '' && s.img != null" :src="$store.state.imageUrls + s.img" alt="" style="width:300px;height:130px;">
							</div>
						</div>
					</el-row>
				</el-form>
			</div>
        </el-tab-pane>
		<el-tab-pane label="采收" name="采收">
			<div class="container">
				<el-form style="margin-top:20px;" class="container" v-for="(item,index) in reaplist" :key="index">
					 <el-row>
						 <el-col :span="5">
									
							 <div style="width:200px;height:200px; border:1px solid #ccc;">
								 <img  :src="api + item.info.plantImg" alt="" style="width:100%;height:100%;">
							 </div>
						 </el-col>
						 <el-col :span="12">
							 <div>
								 <span style="font-size:18px; font-weight:600;">{{item.info.jyName}}</span>
								 <span class="mar-l">种植批次号:{{item.info.plantBatch}}</span>
							 </div>
							 <div style="margin-top:30px;font-size:14px;">
								 <span>种植面积：{{item.info.reapArea}}亩</span>
								 <span class="mar-l">种植地块：{{item.info.soilName}}</span>
								 <span class="mar-l">种植时间：{{item.info.plantTime}}</span>
							 </div>
							 <div class="con">
								 <div style="margin-top:10px;"><span>生长:天</span><span style="position:absolute;left:200px;">种植人：{{item.info.reapUserName}}</span></div>
								 <!-- <div style="margin-top:20px;"><span>种苗数量：{{number}}{{ruleForm.units}}</span></div> -->
							 </div>
						 </el-col>
					</el-row>
					<el-row style="margin-top:30px;">
					   <el-col :span="10">
						   <el-form-item label="采收方式:">
							   {{item.info.reapWay}}
						   </el-form-item>
						   <el-form-item label="采收批号:">
								{{item.info.reapBatch}}
						   </el-form-item>
						   <el-form-item label="开始时间:">
							   {{item.info.beginTime}}
						   </el-form-item>
					   </el-col>
					   <el-col :span="12">
						   <el-form-item label="采收面积:">
							   {{item.info.reapArea}}
						   </el-form-item>
						   <el-form-item label="负责人:">
								{{item.info.reapUserName}}
						   </el-form-item>
						   <el-form-item label="结束时间:">
							   {{item.info.endTime}}
						   </el-form-item>
					   </el-col>
						<div class="addtend"  style="background:#f5f5f5;padding:5px; border:1px solid #33322f;">
							
							   <el-form-item label="产出物名称">
								   {{item.info.list.reapName}}
							   </el-form-item>
							   <el-form-item label="采收部位">
								   {{item.info.list.reapPart}} <span style="margin-left:30px;" ><el-button type="primary">{{item.info.list.reapNumber}}{{item.info.list.units}}</el-button></span>
							   </el-form-item>
							   <el-form-item>
									  <img  :src="api + item.info.list.reapImg" alt="" style="width:200px;height:100px;margin:10px;">
							   </el-form-item>
						 </div>
					 </el-row>
				</el-form>
			</div>
        </el-tab-pane>
		<el-tab-pane label="加工" name="加工">
			<div class="container">
				<div class="container">
					<el-table
					    :data="processMaterial"
					    border
					    style="margin-top:20px;"
					    ref="multipleTable"
					    header-cell-class-name="table-header"
					>
					    <el-table-column prop="info.breedName" sortable label="品名"></el-table-column>
					    <el-table-column prop="info.batch" sortable label="批号"></el-table-column>
					    <el-table-column prop="info.type" sortable label="来源"></el-table-column>
					    <el-table-column prop="info.place" sortable label="地块/供应商"></el-table-column>
					    <el-table-column sortable label="数量"> 
					        <template slot-scope="scope">{{scope.row.info.number}}{{scope.row.info.units}}</template>
					    </el-table-column>
					  
					</el-table>
				</div>
				
				<div class="container" style="margin-top:20px;">
					<el-form>
						
					
					<h3>加工信息</h3>
					<el-form-item label="加工工艺" style="margin-top:20px;">
						<!-- {{ruleForm.detailList[0].technology}} -->
					</el-form-item>
					<div class="addtend" v-for="(s,index) in processTechnology" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
					    <div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.methodName}}</div>
					    <el-form-item label="加工时间">
						    {{s.beginTime}}至{{s.endTime}}
					    </el-form-item>
					    <el-form-item label="负责人">
							{{s.principalName}}
							<el-button v-if="s.equipmentName" type="danger" round size="mini"  style="float: right;margin-right:20px;">查看监控</el-button>
							
					    </el-form-item>
					    <img :src="$store.state.imageUrls + s.processImg" alt="" style="width:300px;height:130px;">
					</div>
					</el-form>
				</div>
				
			</div>
			
		</el-tab-pane>
		<el-tab-pane label="检验检测" name="检验检测">
			<div class="container">
				<el-form label-width="120px" label-position="right">
					<el-row :gutter="20" class="container" style="margin:0px 10px;">
					  <el-col :span="6">
						  <div class="grid-content bg-purple1">
								<h2>{{details.productName}}</h2>
								<div>产品名称</div>
							</div>
						</el-col>
					 
						<el-col :span="6">
							<div class="grid-content bg-purple2">
								<h2>{{details.batch}}</h2>
								<div>加工批号</div>
							</div>
							
						</el-col>
						
					  <el-col :span="6">
						  <div class="grid-content bg-purple3">	
								<h2>{{details.createtime}}</h2>
								<div>加工时间</div>
							</div>
					  </el-col>
						  
						<el-col :span="6">
							<div class="grid-content bg-purple4" v-if="this.details.grade != 'undefind' && this.details.grade != null && this.details.grade != ''">
								<h2>{{details.grade}}</h2>
								<div>品级</div>
							</div>
							
						</el-col>
					</el-row>
					<el-row class="container" style="margin:10px">
						<h3>检验检测</h3>
						
						<el-col :span="12" style="margin-top:20px;">
							<el-form-item label="检测机构：">
								{{detection[0].organization}}
							</el-form-item>
							<el-form-item label="检测标准：">
								{{detection[0].standard}}
							</el-form-item>
							<el-form-item label="检测结果：">
								{{detection[0].detectionResult}}
							</el-form-item>
							<el-form-item label="检测报告：">
								<img :src="$store.state.imageUrls + detection[0].detectionImg" alt="" style="width:200px;height:200px;" v-if="detection[0].detectionImg != '' && detection[0].detectionImg != null">
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="检测负责人：" label-width="auto">
								{{detection[0].userName}}
							</el-form-item>
							<el-form-item label="检测时间：" label-width="auto">
								{{detection[0].time}}
							</el-form-item>
							
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-tab-pane>	
		<el-tab-pane label="仓储" name="仓储">
			<div class="container">
				<el-form class="container">
					<el-row :gutter="20">
					  <el-col :span="6">
						  <div class="grid-content bg-purple1">
								<h2>{{storagemanage.productName}}</h2>
								<div>产品名称</div>
							</div>
						</el-col>
					 
						<el-col :span="6">
						  <div class="grid-content bg-purple2">
								<h2>{{storagemanage.storageBatch}}</h2>
								<div>批号</div>
							</div>
						</el-col>
						
					  <el-col :span="6">
						  <div class="grid-content bg-purple3">
								<h2 v-if="storagemanage.outNumber == '' || storagemanage.outNumber == null">0</h2>
								<h2 v-else>{{storagemanage.outNumber}}</h2>
								<div>出库数量</div>
							</div>
					  </el-col>
				
						<el-col :span="6">
						  <div class="grid-content bg-purple4">
								<h2>{{storagemanage.surplus}}</h2>
								<div>剩余数量</div>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<!-- <div class="container" style="margin-top:20px;">
				<h3>出入库明细</h3>
				<el-table
				    :data="list.storageManageDetaileds"
				    border
					style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header">
				    <el-table-column prop="type" sortable label="类型"></el-table-column>
				    <el-table-column prop="specs" sortable label="规格"></el-table-column>
				    <el-table-column prop="number" sortable label="数量"></el-table-column>
				    <el-table-column prop="createtime" sortable label="时间"></el-table-column>
					<el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
					<el-table-column prop="" sortable label="追溯码"></el-table-column>
				</el-table>
			</div> -->
		</el-tab-pane>	
    </el-tabs>
	
    <el-form>
		<el-form-item class="footerFixed" label-width="0px">
		   
		    <el-button @click="backPage" >返回</el-button>
		</el-form-item>
	</el-form>
      
  </div>
</template>
<script>
	import { traceinfo_fromlaststep,plant_view } from "@/request/api"
export default {
  data() {
    return {
		api:this.$store.state.plantImg,
		activeName:'种植',
		tableData1:[],
		id:'',
		source:'',
		list:[],
		ruleForm:'',
		iday:'',
		detection:[],
		processDetail:'',
		gather:[],
		plantlist:[],
		reaplist:[],
		processlist:[],
		activeNameone:"第1年",
		reapdetaaillist:[],
		processMaterial:[],
		processTechnology:[],
		details:[],
		storagemanage:[]
    }
  },
  mounted(){
	this.id = this.$route.query.id
		this.init1()
  },
  methods: {
	  
    handleClick(tab,event){
      
    },
    backPage(){
		this.$router.go(-1)
    },
    init1(){
		traceinfo_fromlaststep(this.id).then((res)=>{
			this.content = res.infos
			for(var i=0;i<this.content.length;i++){
				this.gather.push(JSON.parse(this.content[i]))
			}
			for(var k=0;k<this.gather.length;k++){
				var rlist = this.gather[k]
				for(var r=0;r<rlist.length;r++){
					if(rlist[r].step == "plant"){
						this.plantlist.push(rlist[r])
					}
					if(rlist[r].step == "reap"){
						this.reaplist.push(rlist[r])
					}
					if(rlist[r].step == "processDetail"){
						this.processlist = rlist[r]
					}
					if(rlist[r].step == "reapDetail"){
						this.reapdetaaillist.push(rlist[r])
					}
					if(rlist[r].step == "processMaterial"){
						this.processMaterial.push(rlist[r])
					}
					if(rlist[r].step == "storageManage"){
						this.storagemanage = rlist[r].info
					}
				}
			}
			console.log(this.gather)
			for(var c=0;c<this.processlist.children.length;c++){
				if(this.processlist.children[c].step == "processTechnology"){
					this.processTechnology = this.processlist.children[c].info
				}
				if(this.processlist.children[c].step == "detection"){
					this.detection = this.processlist.children[c].info
				}
			}
			this.details = this.processlist.info
			console.log(this.processlist.info)
			console.log(this.detection)
			for(var q=0;q<this.reaplist.length;q++){
				var date1 =  new Date().getFullYear() +  "-" +(new Date().getMonth() + 1).toString().padStart(2, "0") +  "-" + new Date().getDate().toString().padStart(2, "0")
				var date2 = this.reaplist[q].info.plantTime.replace(/\//g,"-")
				var date1 = Date.parse(date1)
				var date2 = Date.parse(date2)			  
				var day =  date1 - date2
				var day = Math.abs(day)
				this.reaplist[q].info.iday = Math.floor(day/(24*3600*1000))
				// console.log(this.reapdetaaillist)
				for(var t=0;t<this.reapdetaaillist.length;t++){
					if(this.reapdetaaillist[t].info.reapId == this.reaplist[q].info.id){
						this.reaplist[q].info.list = this.reapdetaaillist[t].info 
					}
				}
				// console.log(this.reaplist[q].info)
			}
			for(var s=0;s<this.plantlist.length;s++){
				var date1 =  new Date().getFullYear() +  "-" +(new Date().getMonth() + 1).toString().padStart(2, "0") +  "-" + new Date().getDate().toString().padStart(2, "0")
				var date2 = this.plantlist[s].info.plantTime.replace(/\//g,"-")
				var date1 = Date.parse(date1)
				var date2 = Date.parse(date2)			  
				var day =  date1 - date2
				var day = Math.abs(day)
				this.plantlist[s].info.iday = Math.floor(day/(24*3600*1000))
			}
		})
    },

  },

}
</script>
<style scoped>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple1 {
	    background: #409EFF 10000%;
	  }
	  .bg-purple2 {
	    background: #F56C6C 10000%;
	  }
	  .bg-purple3 {
	    background: #67C23A 10000%;
	  }
	  .bg-purple4 {
	    background: #909399 10000%;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 80px;
		color:white;
	  }
	  .grid-content div{
		  text-align: right;
		  font-size:14px;
		  margin-top:4px;
		  padding-right:20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  h2{
		  color:white;
		  text-align: right;
		  padding-top:20px;
		  padding-right:20px;
	  }
	.addtend{
	    display:inline-block;
	    width: 300px;
	    margin-left:20px;
	    /* margin:20px; */
	    height:250px;
		border: 1px solid #999;
		
	    /* line-height:200px;
	    text-align: center; */
	    background:#fff;
	}
  .flex{
    display: flex;
  }
  .center{
    justify-content: center;
    align-items: center;
  }
  .between{
    justify-content: space-between;
  }
  .around{
    justify-content: space-around;
  }
  .containers{
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
  }
  .small_title{
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 118, 255, 1);
    border: 1px solid rgba(255, 0, 0, 0);
    color: white;
    width: 30px;
    height: 60px;
    line-height: 30px;
    text-align: center;
  }
  .mar-l{
      margin-left:30px;    
  }
  .con{
      width:400px;
      /* height:100px; */
      background:#E8F1FF;
      border-radius:10px;
      margin-top:25px;
      padding:15px;
      font-size:14px;
      position:relative;
  }
  .addtend{
      display:inline-block;
      width: 300px;
      margin-left:20px;
  	
      /* margin:20px; */
      height:200px;
      /* line-height:200px;
      text-align: center; */
      background:#fff;
  }
  .el-form-item{
  	margin-bottom:0px;
  }
</style>